<template>
  <div class="content">
    <div ref="mapContainer" class="map-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import china from '@/assets/json/china.json';

// 注册完整的中国地图数据
echarts.registerMap('china', china);

export default {
  data() {
    return {
      chart: null,
      option: {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return params.name;
          }
        },
        series: [{
          type: 'map',
          map: 'china',
          label: {
            show: false,
            fontSize: 12,
            color: '#fff'
          },
          itemStyle: {
            areaColor: '#0c274b',
            borderColor: '#1cccff',
            borderWidth: 0.5,
            center: 4.0
          },
          emphasis: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#228be6'
            }
          }
        }]
      }
    };
  },
  mounted() {
    this.initChart();
    this.setChartOption();
    this.resizeChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.mapContainer);
    },
    setChartOption() {
      this.chart.setOption(this.option);
    },
    resizeChart() {
      window.addEventListener('resize', this.chart.resize);
    }
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.chart.resize);
    this.chart.dispose();
  }
};
</script>

<style scoped>
.content {
  width: 50%;
  height:90vh;
  /* background-color: aqua; */
  position: absolute;
  left: 25%;       /* 百分比单位更适配不同分辨率 */
  top: 8%;
}
.map-container {
  width: 100%;
  height: 100%;
}
</style>